Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix text clipping when applying a shadow to it #3226

Closed

Conversation

Vortex2Oblivion
Copy link
Contributor

@Vortex2Oblivion Vortex2Oblivion commented Aug 10, 2024

Currently there seems to be an issue where applying a shadow to a FlxText, the text clips off by whatever the shadow offset is.
image
Here the shadow offset is 8 pixels and the text clips off by 8 pixels without the fix.

With the fix the text appears as it is supposed to be, the text does not clip off
image
Ive tested this on HashLink and C++ targets, it seems to just work(?) but I am unsure if there are any side effects.

I made a quick little test project here

@Vortex2Oblivion Vortex2Oblivion marked this pull request as draft August 10, 2024 13:47
@Vortex2Oblivion
Copy link
Contributor Author

Vortex2Oblivion commented Aug 10, 2024

image
Actually it seems that it causes the shadow to clip off at times when setting it to a larger number?
Here I set it to 22.

image
This is on the latest stable flixel without the changes

@Sword352
Copy link
Contributor

I think the bitmap itself should be bigger (depending on the shadow offset) in order to draw the full text and shadow

@Vortex2Oblivion
Copy link
Contributor Author

I think the bitmap itself should be bigger (depending on the shadow offset) in order to draw the full text and shadow

What do you mean?

@Vortex2Oblivion
Copy link
Contributor Author

I think the bitmap itself should be bigger (depending on the shadow offset) in order to draw the full text and shadow

What do you mean?

Oh wait i think i know hang on

@Vortex2Oblivion
Copy link
Contributor Author

I think the bitmap itself should be bigger (depending on the shadow offset) in order to draw the full text and shadow

What do you mean?

Oh wait i think i know hang on

Actually wait I don't know what you mean.

@Vortex2Oblivion
Copy link
Contributor Author

image
I was able to fix it finally i think

@Vortex2Oblivion
Copy link
Contributor Author

Wait it wont work on haxe 4.2.5 :/

@Vortex2Oblivion
Copy link
Contributor Author

image
It still has issues when setting to a negative number

@Vortex2Oblivion
Copy link
Contributor Author

Vortex2Oblivion commented Aug 11, 2024

image
Fixed issues when using a negative value
Not the best method of doing so though..

@Vortex2Oblivion Vortex2Oblivion marked this pull request as ready for review August 11, 2024 23:27
@Geokureli
Copy link
Member

Geokureli commented Aug 15, 2024

Looking into this now, it's worth mentioning that the intended way to create your desired effect is:

text.setBorderStyle(SHADOW, 0xFF000000, 8, 0);

That works just fine for me, I didn't even know shadowOffset existed, until now, and I believe it's actually meant to serve a different purpose. I can't find any official docs that recommend using shadowOffset, all places seem to use setBorderStyle: tutorial, cheat sheet. When I use the above code, shadowOffset is still (1, 1). Side note, but it's also kinda weird that it's (1, 1) instead of 0,0 because at text.setBorderStyle(SHADOW, 0xFF000000, 0, 0); the shadow and text overlap perfectly, regardless of the value of shadowOffset

That said, it appears shadowOffset is not meant to be used for the purpose you expected and I recommend using setBorderStyle instead. I still think this change may be valid, for people who want to use shadowOffset for its intended purpose, but first, I need to find out what that purpose is.

I'll get back to you on this

@Geokureli
Copy link
Member

Scratch that, looks like there are issues using the intended way, it just needed a shadow size larger than 8 to see
Screenshot 2024-08-15 at 12 36 28 PM

Here's the test I'm doing, I'm seeing some really strange behavior with shadowOffset

package states;

import flixel.FlxG;
import flixel.text.FlxText;

class TextShadowTestState extends flixel.FlxState
{
	var text:FlxText;
	var showBorder = true;
	var shadowSize = 16;
	var shadowQuality = 0;
	
	var instructions:FlxText;
	
	override public function create()
	{
		super.create();
		bgColor = 0xFFff0000;
		
		text = new FlxText();
		text.text = "FlxText shadow clipping test lol";
		text.size = 32;
		text.screenCenter();
		// text.borderStyle = SHADOW;
		// text.shadowOffset.set(8, 8);
		applyShadow();
		add(text);
		
		// debug watch
		FlxG.watch.addFunction("bmd", function ()
		{
			final bmp = text.graphic.bitmap;
			return '( w: ${bmp.width} | h: ${bmp.height} )';
		});
		FlxG.watch.addFunction("shd.offset", ()->text.shadowOffset);
		FlxG.watch.addFunction("shd.size", ()->text.borderSize);
		FlxG.watch.addFunction("shd.quality", ()->text.borderQuality);
		FlxG.watch.addFunction("shd.style", ()->text.borderStyle.getName());
		FlxG.log.notice("LEFT/RIGHT: change shadowOffset");
		FlxG.log.notice("SPACE: reset shadowOffset");
		FlxG.log.notice("UP/DOWN: change borderSize");
		FlxG.log.notice("SHIFT + ^ v: change borderQuality");
		FlxG.log.notice("CLICK: toggle border");
		FlxG.debugger.visible = true;
	}
	
	function applyShadow()
	{
		if (showBorder)
			text.setBorderStyle(SHADOW, 0xFF000000, shadowSize, shadowQuality);
		else
			text.setBorderStyle(NONE);
		
		@:privateAccess text._regen = true;
		@:privateAccess text.regenGraphic();
		FlxG.bitmapLog.clear();
		FlxG.bitmapLog.add(text.graphic.bitmap);
	}

	override public function update(elapsed:Float)
	{
		super.update(elapsed);
		
		var redraw = false;
		
		if (FlxG.keys.anyJustPressed([SPACE, RIGHT, LEFT]))
		{
			if (FlxG.keys.justPressed.SPACE) text.shadowOffset.set(1, 1);
			if (FlxG.keys.justPressed.RIGHT) text.shadowOffset.add(1, 1);
			if (FlxG.keys.justPressed.LEFT) text.shadowOffset.add(-1, -1);
			
			redraw = true;
		}
		
		if (FlxG.keys.anyJustPressed([UP, DOWN]))
		{
			if (FlxG.keys.pressed.SHIFT)
			{
				if (FlxG.keys.justPressed.UP && shadowQuality < 2) shadowQuality++;
				if (FlxG.keys.justPressed.DOWN && shadowQuality > 0) shadowQuality--;
			}
			else
			{
				if (FlxG.keys.justPressed.UP) shadowSize++;
				if (FlxG.keys.justPressed.DOWN) shadowSize--;
			}
			
			redraw = true;
		}
		
		if (FlxG.mouse.justPressed)
		{
			showBorder = !showBorder;
			redraw = true;
		}
		
		if (redraw)
			applyShadow();
	}
}

@Geokureli Geokureli mentioned this pull request Aug 15, 2024
4 tasks
@Vortex2Oblivion
Copy link
Contributor Author

I cant seem to find out how im going to fix the issue when using setBorderStyle

@Geokureli
Copy link
Member

I've started a new PR with a different fix:
#3236

@Geokureli Geokureli closed this Aug 15, 2024
@Vortex2Oblivion Vortex2Oblivion deleted the fix-text-shadow branch September 26, 2024 19:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants